<template>
  <div>
    <ul>
      <li>
        <van-nav-bar title="我的购物袋" left-arrow @click-left="onClickLeft" />
      </li>
      <li>
        <p>免税限购：自然年内免税品累计限购10万元<span class="details">详情</span></p>
      </li>
      <!-- 有商品时 -->
      <div v-if="flag">
        <li v-for="(v, index) in goodsMsg" :key="index" class="father">

          <van-swipe-cell>
            <van-card :num="v.num" :price="v.originprice" :desc="v.proname" class="goods-card" :thumb="v.img1" />
            <template #right>
              <van-button square @click="delOne(v.cartid, $event)" text="删除" type="danger" class="delete-button" />
            </template>
            <div class="aordBtn">
              <van-button size="mini" :disabled="clickBtn" @click="delthisOne(v)">-</van-button>
              <van-button size="mini" @click="addOne(v)">+</van-button>
            </div>
          </van-swipe-cell>
        </li>
        <li>
          <van-submit-bar :price="allGoodsPrice" button-text="提交订单" />
        </li>
      </div>
      <div v-else>
        <li>
          <van-empty description="您购物袋没有任何商品。。。" />
        </li>
        <li class="goshopfa">
          <div class="goshop" @click="onClickLeft">去逛逛</div>
        </li>
      </div>
    </ul>
  </div>
</template>

<script>
import { Notify } from 'vant';
import service from '../../../utils/service'
export default {
  data() {
    return {
      goodsMsg: [],  //获取商品总数据
      flag: true,  //控制购物袋展示内容
      allGoodsPrice: 0, //总价变量
      clickBtn: false  //减少商品的数量按钮
    }
  },
  methods: {
    // 计算总价
    sumUpAll() {
      let sum = 0
      this.goodsMsg.forEach(element => {
        sum += element.num * element.originprice * 100
        this.allGoodsPrice = sum
      })
    },
    // 商品加一
    addOne(goods) {
      goods.num++
      service({
        url: "http://118.178.238.19:3001/api/cart/updatenum",
        method: "POST",
        data: {
          cartid: goods.cartid,
          num: goods.num
        }
      }).then((res) => {
        Notify({ type: 'success', message: '商品  + 1' });
      })
      this.sumUpAll()
    },
    // 商品减一
    delthisOne(goods) {
      if (goods.num > 1) {
        goods.num--
        service({
          url: "http://118.178.238.19:3001/api/cart/updatenum",
          method: "POST",
          data: {
            cartid: goods.cartid,
            num: goods.num
          }
        }).then((res) => {
          console.log(res.data)
          Notify({ type: 'warning', message: '商品  - 1' });
        })
        this.sumUpAll()
      }
    },
    // 删除单个商品
    delOne(id, e) {
      service({
        url: "http://118.178.238.19:3001/api/cart/remove",
        method: "POST",
        data: {
          cartid: id
        }
      }).then((res) => {
        console.log(res.data)
        Notify({ type: 'success', message: res.data.message });
        this.goodsMsg = []
        this.toRequest()
      })
      let delThis = e.currentTarget.parentElement.parentElement.parentElement.parentElement
      delThis.remove()
    },
    // 去首页
    onClickLeft() {
      this.$router.push('/home')
    },
    // 查看购物车
    toRequest() {
      service({
        url: "http://118.178.238.19:3001/api/cart/list",
        method: "POST",
        data: {
          userid: sessionStorage.getItem('userid')
        }
      }).then((res) => {
        if (res.data.data == undefined) {
          this.flag = false
        } else {
          res.data.data.forEach(element => {
            this.goodsMsg.push(element)
            this.sumUpAll()
          });
        }
      })
    }
  },
  // 挂载时
  mounted() {
    this.toRequest()
  }
}
</script>

<style scoped>
.father {
  position: relative;
}

.aordBtn {
  position: absolute;
  bottom: 10%;
  right: 15%;
}



.goods-card {
  margin: 0;
}

.delete-button {
  height: 100%;
}

li:nth-child(2) {
  font-size: 12px;
  background: #efeff5;
  line-height: 46px;
}

.details {
  text-decoration: underline;
  color: #b81c22;
}

.goshopfa {
  display: flex;
  justify-content: center;
  align-items: center;
}

.goshop {
  width: 110px;
  height: 30px;
  border: 1px solid #b81c22;
  border-radius: 20px;
  text-align: center;
  line-height: 30px;
  margin: auto;
  color: #b81c22;
}
</style>